<template>
  <!--  <GiTable-->
  <!--      row-key="id"-->
  <!--      :data="dataList"-->
  <!--      :columns="columns"-->
  <!--      :loading="loading"-->
  <!--      :scroll="{ x: '100%', y: '100%', minWidth: 600 }"-->
  <!--      :pagination="pagination"-->
  <!--      :disabled-tools="['refresh','size', 'setting', 'fullscreen']"-->
  <!--      :disabled-column-keys="['id']"-->
  <!--      :selected-keys="selectedKeys"-->
  <!--      @select="select"-->
  <!--      @select-all="selectAll"-->
  <!--      @refresh="reset"-->
  <!--  >-->
  <!--    <template #action="{ record }">-->
  <!--      <a-space>-->
  <!--        <a-link v-permission="['settlement:salaryLog:update']" title="修改" @click="onUpdate(record)">修改</a-link>-->
  <!--      </a-space>-->
  <!--    </template>-->
  <!--    <SalaryLogAddModal ref="SalaryLogAddModalRef" @save-success="search"/>-->
  <!--  </GiTable>-->

  <GiTable
      row-key="id"
      :data="dataList"
      :columns="columns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      :disabled-tools="['refresh','size', 'setting', 'fullscreen']"
      :disabled-column-keys="['id']"
      @refresh="search"
  >
    <template #toolbar-right>
      <a-button v-permission="['settlement:salaryLog:create']" type="primary" @click="onAdd">
        <template #icon>
          <icon-plus/>
        </template>
        <template #default>新增</template>
      </a-button>
    </template>
    <template #action="{ record }">
      <a-space>
        <a-link v-permission="['settlement:salaryLog:update']" title="修改" @click="onUpdate(record)">修改</a-link>
        <a-link
            v-permission="['settlement:salaryLog:delete']"
            status="danger"
            :disabled="record.disabled"
            :title="record.disabled ? '不可删除' : '删除'"
            @click="onDelete(record)"
        >
          删除
        </a-link>
      </a-space>
    </template>
  </GiTable>

  <SalaryLogAddModal ref="SalaryLogAddModalRef" :employee-id="props.userId" @save-success="search"/>
</template>

<script lang='tsx' setup>
import type {TableInstance} from '@arco-design/web-vue'
import SalaryLogAddModal from "@/views/settlement/earnings/components/SalaryLogAddModal.vue";
import {useResetReactive, useTable} from '@/hooks'
import {isMobile} from '@/utils'

import {
  type SalaryLogResp,
  type SalaryLogQuery, deleteSalaryLog,
  listSalaryLogByUserId
} from '@/apis/settlement/salaryLog'


const props = withDefaults(defineProps<Props>(), {
  userId: '',
})

interface Props {
  userId: string
}

const [queryForm, resetForm] = useResetReactive<SalaryLogQuery>({
  employeeId: props.userId,
  status: 2,
  sort: ['createTime,desc']
})

const {
  tableData: dataList,
  loading,
  pagination,
  search,
  selectedKeys,
  select,
  selectAll,
  handleDelete,
} = useTable((page) => listSalaryLogByUserId({...queryForm, ...page}), {immediate: false})

const columns: TableInstance['columns'] = [
  {
    title: '序号',
    width: 75,
    align: 'center',
    render: ({rowIndex}) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
    fixed: !isMobile() ? 'left' : undefined,
  },
  {title: '工资', align: 'center', dataIndex: 'salary', slotName: 'salary'},
  {title: '结算时间', align: 'center', dataIndex: 'createTime', slotName: 'createTime'},
  {
    title: '操作',
    dataIndex: 'action',
    slotName: 'action',
    width: 160,
    align: 'center',
    fixed: !isMobile() ? 'right' : undefined,
  }
]

// 重置
const reset = () => {
  resetForm()
  search()
}

// // 删除
// const onDelete = (record: SalaryLogResp) => {
//   return handleDelete(() => deleteSalaryLog(record.id), {
//     content: `是否确定删除该条数据？`,
//     showModal: true
//   })
// }


const SalaryLogAddModalRef = ref<InstanceType<typeof SalaryLogAddModal>>()

// 新增
// 新增
const onAdd = () => {
  SalaryLogAddModalRef.value?.onAdd()
}


// 修改
const onUpdate = (record: SalaryLogResp) => {
  SalaryLogAddModalRef.value?.onUpdate(record.id)
}

// 删除
const onDelete = (record: SalaryLogResp) => {
  return handleDelete(() => deleteSalaryLog(record.id), {
    content: `是否确定删除该条数据？`,
    showModal: true
  })
}

// 监听 userId 的变化
watch(
    () => props.userId,
    async (newUserId) => {
      if (newUserId) {
        // console.log('userId changed', newUserId)
        queryForm.employeeId = newUserId
        search()
      }
    },
    {immediate: true},
)
</script>

<style scoped lang="scss"></style>
